<template>
  <div class="data-analysis">
    <!-- 累计降雨量 -->
    <div class="bp-item rainfall-item">
      <div ref="rainfallChart" class="chart-container"></div>
    </div>
    
    <!-- 受灾人口统计 -->
    <div class="bp-item population-item">
      <h6>受灾人口统计：</h6>
      <div class="population-list">
        <ul>
          <li>受灾人口：{{ populationData.affected }} 人</li>
          <li>转移安置：{{ populationData.relocated }} 人</li>
          <li>重点关注人群：高龄 {{ populationData.elderly }} / 儿童 {{ populationData.children }}</li>
        </ul>
      </div>
    </div>
    
    <!-- 今日报送物资品量 -->
    <div class="bp-item supplies-item">
      <h6>今日报送物资品量：</h6>
      <div ref="suppliesChart" class="chart-container"></div>
    </div>
    
    <!-- 今日发现并定位受困人员 -->
    <div class="bp-item rescued-item">
      <h6>今日发现并定位受困人员：</h6>
      <div class="victim-list">
        <ul>
          <li v-for="(victim, index) in victimData" :key="index">
            坐标 {{ victim.location }}（{{ victim.coordinates }}）人数：{{ victim.count }}
          </li>
        </ul>
      </div>
    </div>
    
    <!-- 累计救援成功率 -->
    <div class="bp-item success-item">
      <h6>累计救援成功率：</h6>
      <div ref="successChart" class="chart-container"></div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'DataAnalysisCharts',
  setup() {
    // 图表引用
    const rainfallChart = ref(null)
    const suppliesChart = ref(null)
    const successChart = ref(null)

    // 受灾人口数据
    const populationData = ref({
      affected: '1,368',
      relocated: '523',
      elderly: '94',
      children: '41'
    })

    // 受困人员数据
    const victimData = ref([
      { location: 'A', coordinates: '东经120.21 北纬30.25', count: 3 },
      { location: 'B', coordinates: '东经106.55 北纬29.57', count: 2 },
      { location: 'C', coordinates: '东经114.31 北纬30.59', count: 4 }
    ])

    // 初始化降雨量图表 - 采用B项目的样式，不使用平滑曲线
   const initRainfallChart = () => {
      if (!rainfallChart.value) return
      
      const chart = echarts.init(rainfallChart.value)
      const data = [12, 19, 8, 25, 16, 20, 14];
      
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '累计降雨量：',
          left: 'center',
          textStyle: {
            color: '#9bd7ff',
            fontSize: 14
          }
        },
        grid: { 
          left: 40, 
          right: 10, 
          top: 40, // 增加顶部间距以容纳标题
          bottom: 25 
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: { color: '#9bd7ff', fontSize: 10 },
          axisLine: { lineStyle: { color: '#006cff' } },
          axisTick: { show: false }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 30, // 固定最大值
          interval: 5, // 固定间隔为5
          axisLabel: { 
            color: '#9bd7ff', 
            fontSize: 10,
            formatter: '{value} mm'
          },
          axisLine: { 
            show: true,
            lineStyle: { color: '#006cff' } 
          },
          splitLine: { 
            show: true,
            lineStyle: { color: 'rgba(0, 108, 255, 0.2)' } 
          }
        },
        series: [{
          name: '降雨量',
          type: 'line',
          data: data,
          smooth: false,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: '#5dc2fe',
            width: 3,
            shadowColor: 'rgba(93, 194, 254, 0.6)',
            shadowBlur: 8
          },
          itemStyle: {
            color: '#5dc2fe',
            borderColor: '#fff',
            borderWidth: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(93, 194, 254, 0.3)' },
              { offset: 1, color: 'rgba(93, 194, 254, 0.05)' }
            ])
          }
        }],
        tooltip: { 
          trigger: 'axis',
          formatter: function(params) {
            return params[0].name + '<br/>降雨量: ' + params[0].value + ' mm';
          }
        }
      }
      
      chart.setOption(option)
      
      // 添加窗口大小变化时的响应式调整
      window.addEventListener('resize', function() {
        chart.resize();
      });
    }

    // 初始化物资投送图表 - 采用B项目的样式
    const initSuppliesChart = () => {
      if (!suppliesChart.value) return
      
      const chart = echarts.init(suppliesChart.value)
      const option = {
        backgroundColor: 'transparent',
        grid: { left: 36, right: 10, top: 25, bottom: 25 },
        xAxis: {
          type: 'category',
          data: ['帐篷', '饮用水', '食品', '药品', '发电机'],
          axisLabel: { color: '#9bd7ff', fontSize: 10 },
          axisLine: { lineStyle: { color: '#006cff' } },
          axisTick: { show: false }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#9bd7ff', fontSize: 10 },
          axisLine: { lineStyle: { color: '#006cff' } },
          splitLine: { lineStyle: { color: 'rgba(0, 108, 255, 0.2)' } }
        },
        series: [{
          type: 'bar',
          data: [120, 300, 260, 140, 40],
          barWidth: '60%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#58a6ff' },
              { offset: 1, color: '#58a6ff88' }
            ]),
            borderRadius: [4, 4, 0, 0],
            shadowBlur: 8,
            shadowColor: 'rgba(88, 166, 255, 0.4)'
          }
        }],
        tooltip: { trigger: 'axis' }
      }
      chart.setOption(option)
    }

    // 初始化成功率图表 - 使用更好看的环形进度条
     const initSuccessChart = () => {
       if (!successChart.value) return
       
       const chart = echarts.init(successChart.value)
       const successRate = 86
       
       const option = {
         backgroundColor: 'transparent',
         animation: true,
         animationDuration: 2000,
         series: [
           // 外圈装饰环
           {
             type: 'pie',
             radius: ['75%', '85%'],
             center: ['50%', '50%'],
             silent: true,
             data: [
               { value: 100, itemStyle: { 
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                   { offset: 0, color: 'rgba(0, 150, 255, 0.3)' },
                   { offset: 1, color: 'rgba(93, 194, 254, 0.3)' }
                 ])
               }}
             ],
             label: { show: false },
             animation: false
           },
           // 主要进度环
           {
             type: 'pie',
             radius: ['50%', '70%'],
             center: ['50%', '50%'],
             startAngle: 90,
             data: [
               {
                 value: successRate,
                 itemStyle: {
                   color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                     { offset: 0, color: '#0096ff' },
                     { offset: 0.5, color: '#5dc2fe' },
                     { offset: 1, color: '#9bd7ff' }
                   ]),
                   shadowColor: 'rgba(93, 194, 254, 0.8)',
                   shadowBlur: 15,
                   shadowOffsetX: 0,
                   shadowOffsetY: 0
                 }
               },
               {
                 value: 100 - successRate,
                 itemStyle: {
                   color: 'rgba(155, 215, 255, 0.1)',
                   borderColor: 'rgba(0, 150, 255, 0.2)',
                   borderWidth: 1
                 }
               }
             ],
             label: { show: false },
             emphasis: { disabled: true },
             animationType: 'scale',
             animationEasing: 'elasticOut'
           },
           // 内圈光效
           {
             type: 'pie',
             radius: ['35%', '45%'],
             center: ['50%', '50%'],
             silent: true,
             data: [
               { value: 100, itemStyle: { 
                 color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
                   { offset: 0, color: 'rgba(93, 194, 254, 0.6)' },
                   { offset: 1, color: 'rgba(93, 194, 254, 0.1)' }
                 ])
               }}
             ],
             label: { show: false },
             animation: true,
             animationDuration: 2000
           }
         ],
         graphic: [
           // 中心数字显示
           {
             type: 'text',
             left: 'center',
             top: 'center',
             style: {
               text: successRate + '%',
               fontSize: 16,
               fontWeight: 'bold',
               fill: '#5dc2fe',
               textShadowColor: 'rgba(93, 194, 254, 0.8)',
               textShadowBlur: 10,
               fontFamily: 'Consolas'
             }
           },
           // 成功率标签
           {
             type: 'text',
             left: 'center',
             top: '65%',
             style: {
               text: '成功率',
               fontSize: 12,
               fill: '#9bd7ff',
               fontFamily: 'Microsoft YaHei'
             }
           }
         ]
       }
       chart.setOption(option)
       
       // 添加动态光效
       let angle = 0
       const timer = setInterval(() => {
         angle += 2
         chart.setOption({
           series: [{}, {}, {
             data: [{ 
               value: 100, 
               itemStyle: { 
                 color: new echarts.graphic.RadialGradient(
                   0.5 + 0.3 * Math.cos(angle * Math.PI / 180), 
                   0.5 + 0.3 * Math.sin(angle * Math.PI / 180), 
                   0.5, [
                   { offset: 0, color: 'rgba(93, 194, 254, 0.8)' },
                   { offset: 1, color: 'rgba(93, 194, 254, 0.1)' }
                 ])
               }
             }]
           }]
         })
       }, 100)
       
       // 清理定时器
       chart.on('dispose', () => {
         clearInterval(timer)
       })
     }

    onMounted(async () => {
      await nextTick()
      initRainfallChart()
      initSuppliesChart()
      initSuccessChart()
    })

    return {
      rainfallChart,
      suppliesChart,
      successChart,
      populationData,
      victimData
    }
  }
}
</script>

<style scoped>
.data-analysis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
  height: 100%;
  padding: 0;
}

.bp-item {
  min-height: 8rem;
  background: linear-gradient(135deg, 
    rgba(0, 108, 255, 0.08) 0%, 
    rgba(93, 194, 254, 0.12) 50%, 
    rgba(155, 215, 255, 0.08) 100%);
  border: 1px solid rgba(93, 194, 254, 0.3);
  border-radius: 8px;
  padding: 0.6rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.bp-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(93, 194, 254, 0.2) 50%, 
    transparent 100%);
  animation: itemScan 3s linear infinite;
  animation-delay: calc(var(--item-index) * 0.5s);
}

.bp-item:hover {
  background: linear-gradient(135deg, 
    rgba(0, 108, 255, 0.15) 0%, 
    rgba(93, 194, 254, 0.2) 50%, 
    rgba(155, 215, 255, 0.15) 100%);
  border-color: rgba(93, 194, 254, 0.6);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(0, 108, 255, 0.3),
    0 0 20px rgba(93, 194, 254, 0.4);
}

.bp-item h6 {
  color: #5dc2fe;
  font-size: 0.6rem;
  margin: 0 0 0.4rem 0;
  text-align: center;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(93, 194, 254, 0.8);
  letter-spacing: 1px;
}

.chart-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
}

.population-list, .victim-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #9bd7ff;
  font-size: 0.55rem;
  line-height: 1.6;
}

.population-list ul, .victim-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.population-list li, .victim-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(93, 194, 254, 0.2);
  transition: all 0.3s ease;
}

.population-list li:hover, .victim-list li:hover {
  color: #5dc2fe;
  background: rgba(93, 194, 254, 0.1);
  padding-left: 0.3rem;
}

.population-list li:last-child, .victim-list li:last-child {
  border-bottom: none;
}

@keyframes itemScan {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 响应式调整 */
@media screen and (max-width: 1400px) {
  .bp-item {
    min-height: 7rem;
    padding: 0.5rem;
  }
  
  .bp-item h6 {
    font-size: 0.55rem;
    margin-bottom: 0.3rem;
  }
  
  .chart-container {
    min-height: 5rem;
  }
  
  .population-list, .victim-list {
    font-size: 0.5rem;
  }
}

@media screen and (max-width: 1200px) {
  .data-analysis {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }
  
  .bp-item {
    min-height: 6rem;
  }
}

@media screen and (max-width: 768px) {
  .data-analysis {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  
  .bp-item {
    min-height: 5rem;
    padding: 0.4rem;
  }
}
</style>